body {font-family: "Raleway", Arial, sans-serif; color:gray; background-color:#202020;}
a:link {  color: red;}
a:visited {  color: tomato;}
a:hover {  color: maroon;}
a:active {  color: yellow;}
textarea {width:100%; color:gray; background-color:black; resize:none;}
input[type=submit]{border-radius:4px;color:white; background-color:maroon;}
iframe {width:100%; height:600px;}
/*img {max-width:80%; height:auto; object-fit:scale-down;}*/
img.work {max-width:100%;object-fit:scale-down;}
img.ss {z-index:-1;opacity:0;animation-iteration-count:infinite;animation-play-state:paused;filter:blur(30px);border-width:4vmin;border-style:solid;border-color:white;position:fixed;}
/*img.ss {z-index:-1;opacity:0;animation-iteration-count:infinite;left:50%;transform:translateX(-50%);max-width:80%;animation-name:fade;}*/
img.bash { max-width:100%;max-height:100vh;margin:auto;}

@keyframes ghost {from {opacity:0;} to {opacity:1;}}

.ghost {animation-name: ghost; animation-duration: 4s;}

@keyframes slidein {from {left:75%;} to {left:0%;}}

.slide {
  position:relative;
  animation-name: slidein;
  animation-duration: 4s;
  animation-fill-mode:backwards;
}

div.bash{ display:flex;justify-content:center;height:100%;}
div.flex {display:flex; flex-direction:row;flex-wrap:wrap;justify-content:space-around;}

div.slide {
  position:absolute;
  animation-name: slidein;
  animation-duration: 4s;
}

a.d:link {color:goldenrod;}
a.d:visited {color:darkgoldenrod;}
a.d:hover {color:gold;}
a.d:active {color:goldenrod;}

input[type=submit].d{border-radius:8px;color:white; background-color:goldenrod;}

.center {text-align:center;}

.delay2 {animation-delay:2s;}
.delay4 {animation-delay:4s;}
.delay6 {animation-delay:6s;}
.delay8 {animation-delay:8s;}

p {
  animation-name: ghost;
  animation-duration: 4s;
  animation-fill-mode: backwards;
}

.left, .right {
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.main {
  float: left;
  width: 60%; /* The width is 60%, by default */
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
Textarea{rows:16;}
iframe {height:50%;}
div.work {width:33%;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
div.work {width:25%;}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
iframe {object-fit: contain}
}